<template>
  <div ref="chartContainer" class="chart-container">
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts/core'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册ECharts组件
echarts.use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer])

const chartContainer = ref(null)

const useElectricity_data = [
  { Date: '08-21', useElectricity: 12.6 },
  { Date: '08-22', useElectricity: 4.3 },
  { Date: '08-23', useElectricity: 2.7 },
  { Date: '08-24', useElectricity: 6.5 },
  { Date: '08-25', useElectricity: 14.1 },
  { Date: '08-26', useElectricity: 8.3 },
  { Date: '08-27', useElectricity: 11.7 },
  { Date: '08-28', useElectricity: 4.1 },
  { Date: '08-29', useElectricity: 9.3 },
  { Date: '08-30', useElectricity: 8.7 },
  { Date: '08-31', useElectricity: 5.1 },
  { Date: '09-01', useElectricity: 7.2 },
  { Date: '09-02', useElectricity: 10.3 },
  { Date: '09-03', useElectricity: 13.4 },
  { Date: '09-04', useElectricity: 6.7 },
  { Date: '09-05', useElectricity: 11.8 },
  { Date: '09-06', useElectricity: 9.5 },
  { Date: '09-07', useElectricity: 8.1 },
  { Date: '09-08', useElectricity: 7.4 },
  { Date: '09-09', useElectricity: 12.2 },
  { Date: '09-10', useElectricity: 5.6 },
  { Date: '09-11', useElectricity: 8.8 },
  { Date: '09-12', useElectricity: 6.3 },
  { Date: '09-13', useElectricity: 10.7 },
  { Date: '09-14', useElectricity: 7.9 },
  { Date: '09-15', useElectricity: 11.2 },
  { Date: '09-16', useElectricity: 9.1 },
  { Date: '09-17', useElectricity: 8.4 },
  { Date: '09-18', useElectricity: 6.6 },
  { Date: '09-19', useElectricity: 12.5 },
  { Date: '09-20', useElectricity: 4.9 },
  { Date: '09-21', useElectricity: 7.7 }
]

const chunkedData = () => {
  const chunks = []
  for (let i = 0; i < useElectricity_data.length; i += 3) {
    const chunk = useElectricity_data.slice(i, i + 3)
    const total = chunk.reduce((sum, item) => sum + item.useElectricity, 0)
    chunks.push({
      name: `${chunk[0].Date} - ${chunk[chunk.length - 1].Date}`,
      value: total
    })
  }
  return chunks
}

const chartOptions = {
  title: {
    text: '每三天用电量',
    left: 'center',
    top: '5%' // 将标题向下移动
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    top: '15%' // 将图例向下移动
  },
  series: [
    {
      name: '用电量',
      type: 'pie',
      radius: '50%',
      center: ['50%', '65%'], // 将饼图中心向下移动到容器的60%高度位置
      data: chunkedData(),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        show: true,
        formatter: function (params) {
          return `${params.name}\n${params.value.toFixed(2)} 度`
        }
      }
    }
  ]
}


onMounted(() => {
  const chart = echarts.init(chartContainer.value)
  chart.setOption(chartOptions)
})
</script>

<style>
.chart-container {
  height: 500px; /* 调整高度 */
  width: 500px;
  border: 0.667px solid black;
  padding: 0px;
}

</style>
